<template>
    <div class="detail">
        <!-- <product-param :title="product.name"></product-param> -->
        <div class="wrapper">
            <div class="container clearfix">
                <div class="swiper">
                    <swiper :options="swiperOption">
                        <swiper-slide v-for="(item, index) in albumPics" :key="index">
                            <div class="swiperImg"><img :src="$img + item" alt="展示图" /></div>
                        </swiper-slide>
                        <div class="swiper-pagination" slot="pagination"></div>
                        <div class="swiper-button-prev" slot="button-prev"></div>
                        <div class="swiper-button-next" slot="button-next"></div>
                    </swiper>
                </div>
                <div class="content">
                    <h2 class="item-title">
                        {{ product.name }}

                        <el-button v-if="username" type="text" @click="collect">{{ product.favorite ? '取消收藏' : '收藏' }}</el-button>
                    </h2>
                    <p class="item-info">【商品货号】 {{ product.productSn }}</p>
                    <p class="item-info">【商品品牌】 {{ product.brandName }}</p>
                    <p class="item-info">【整箱数量】 {{ product.fclQuantity }}</p>
                    <p class="item-info">【内包装数量】 {{ product.innerPackageQuantity }}</p>
                    <p class="item-info">【商品产地】 {{ product.areaName }}</p>
                    <p class="item-info">【商品材质】 {{ product.material }}</p>
                    <p class="item-info">【商品尺寸】 {{ product.size }}</p>
                    <p class="item-info">【商品价格】 ¥{{ product.price }}元</p>
                    <table class="dTable">
                        <tr>
                            <th>颜色</th>
                            <th>商品图片</th>
                            <th>国际条码</th>
                            <th>商品库存</th>
                            <th>购买数量</th>
                        </tr>
                        <tr>
                            <td>{{ product.color }}</td>
                            <td><img style="width: 60px" :src="$img + product.pic" alt="" /></td>
                            <td>{{ product.barCode }}</td>
                            <td>{{ product.stock }}</td>
                            <td>
                                <el-input-number size="mini" v-model="quantity" :min="1" :max="product.stock"></el-input-number>
                            </td>
                        </tr>
                    </table>
                    <!-- <div class="delivery">{{ product.brandName }}</div>
                    <div class="item-price">
                        {{ product.price }}元<span class="del" v-if="product.originalPrice > product.price"
                            >{{ product.originalPrice }}元</span
                        >
                    </div>
                    <div class="line"></div>
                    <div class="item-addr"> -->
                    <!-- <i class="icon-loc"></i> -->
                    <!-- <div class="addr">北京 北京市 朝阳区 安定门街道</div>
                        <div class="stock">库存{{ product.stock }}{{ product.unit }}</div>
                    </div> -->
                    <!-- <div class="item-version clearfix">
                        <h2>选择版本</h2>
                        <div class="phone fl" :class="{ checked: version == 1 }" @click="version = 1">6GB+64GB 全网通</div>
                        <div class="phone fr" :class="{ checked: version == 2 }" @click="version = 2">4GB+64GB 移动4G</div>
                    </div>
                    <div class="item-color">
                        <h2>选择颜色</h2>
                        <div class="phone checked">
                            <span class="color"></span>
                            深空灰
                        </div>
                    </div> -->
                    <!-- <div class="item-total">
                        <div class="phone-info clearfix">
                            <div class="fl">{{ product.name }}</div>
                            <div class="fr">{{ product.price }}元</div>
                        </div>
                        <div class="phone-total">总计：{{ product.price }}元</div>
                    </div> -->

                    <div class="btn-group">
                        <a href="javascript:;" class="btn btn-huge" @click="addCart">立即购买</a>
                    </div>
                </div>
            </div>
        </div>
        <el-divider></el-divider>

        <div class="container">
            <video class="dVideo" :src="$img + product.productVideo"></video>
            <div v-html="product.detailHtml"></div>
            <!-- <img class="pimg" src="/imgs/product/detail1.jpg" />
            <img class="pimg" src="/imgs/product/detail2.jpg" />
            <img class="pimg" src="/imgs/product/detail3.jpg" />
            <img class="pimg" src="/imgs/product/detail4.jpg" />
            <img class="pimg" src="/imgs/product/detail5.jpg" /> -->
        </div>
        <!-- <div class="price-info">
            <div class="container">
                <h2>价格说明</h2>
                <div class="desc">
                    <img src="/imgs/detail/item-price.jpeg" alt="" />
                </div>
            </div>
        </div> -->
        <service-bar></service-bar>
    </div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';
import ProductParam from './../components/ProductParam';
import ServiceBar from './../components/ServiceBar';
import { mapState } from 'vuex';
export default {
    name: 'detail',
    components: {
        swiper,
        swiperSlide,
        ProductParam,
        ServiceBar
    },
    computed: {
        ...mapState(['username'])
    },
    data() {
        return {
            id: this.$route.params.id, // 获取商品ID
            version: 1, // 商品版本切换
            quantity: 1,
            product: {}, // 商品信息
            swiperOption: {
                autoplay: true,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                },
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true
                }
            },
            albumPics: []
        };
    },
    mounted() {
        this.getProductInfo();
    },
    methods: {
        getProductInfo() {
            this.$http.get(`/api/goods/detail?id=${this.id}`).then((res) => {
                this.product = Object.assign({}, this.product, res);
                this.albumPics = res.albumPics ? res.albumPics.split(',') : [res.pic];

                // console.log(this.albumPics.length)
            });
        },
        collect() {
            this.$http
                .post(`/api/member/favorite/saveOrCancel`, {
                    objId: this.product.id,
                    name: this.product.name
                })
                .then((res) => {
                    this.product.favorite = !this.product.favorite;
                    this.$message.success(res);
                });
        },
        addCart() {
            this.$http
                .post('/carts', {
                    productId: this.id,
                    selected: true
                })
                .then((res) => {
                    this.$store.dispatch('saveCartCount', res.cartTotalQuantity);
                    this.$message.success('已加入购物车');
                });
        }
    }
};
</script>
<style lang="scss">
@import './../assets/scss/config.scss';
@import './../assets/scss/mixin.scss';
.pimg {
    display: block;
    width: 100%;
}
.detail {
    margin-top: 15px;
    .wrapper {
        .swiper {
            float: left;
            width: 642px;
            height: 500px;
            margin-top: 5px;
            padding-right: 20px;
            box-sizing: border-box;
            .swiperImg {
                width: 100%;
                height: 500px;
                display: flex;
                justify-content: center;
                align-items: center;
                img {
                    max-width: 100%;
                    max-height: 100%;
                }
            }
        }
        .content {
            float: right;
            width: 584px;

            .item-title {
                font-size: 28px;
                padding-top: 30px;
                padding-bottom: 16px;
                height: 26px;
                margin-bottom: 20px;
            }
            .item-info {
                font-size: 16px;
                height: 36px;
                line-height: 36px;
            }
            .delivery {
                font-size: 16px;
                color: #ff6700;
                margin-top: 26px;
                margin-bottom: 14px;
                height: 15px;
            }
            .item-price {
                font-size: 20px;
                color: #ff6700;
                height: 19px;
                .del {
                    font-size: 16px;
                    color: #999999;
                    margin-left: 10px;
                    text-decoration: line-through;
                }
            }
            .line {
                height: 0;
                margin-top: 25px;
                margin-bottom: 28px;
                border-top: 1px solid #e5e5e5;
            }
            .item-addr {
                height: 108px;
                background-color: #fafafa;
                border: 1px solid #e5e5e5;
                box-sizing: border-box;
                padding-top: 31px;
                padding-left: 31px;
                font-size: 14px;
                line-height: 14px;
                position: relative;
                .icon-loc {
                    position: absolute;
                    top: 27px;
                    left: 34px;
                    @include bgImg(20px, 20px, '/imgs/detail/icon-loc.png');
                }
                .addr {
                    color: #666666;
                }
                .stock {
                    margin-top: 15px;
                    color: #ff6700;
                }
            }
            .item-version,
            .item-color {
                margin-top: 30px;
                h2 {
                    font-size: 18px;
                    margin-bottom: 20px;
                }
            }
            .item-version,
            .item-color {
                .phone {
                    width: 287px;
                    height: 50px;
                    line-height: 50px;
                    font-size: 16px;
                    color: #333333;
                    border: 1px solid #e5e5e5;
                    box-sizing: border-box;
                    text-align: center;
                    cursor: pointer;
                    span {
                        color: #666666;
                        margin-left: 15px;
                    }
                    .color {
                        display: inline-block;
                        width: 14px;
                        height: 14px;
                        background-color: #666666;
                    }
                    &.checked {
                        border: 1px solid #ff6600;
                        color: #ff6600;
                    }
                }
            }
            .item-total {
                height: 108px;
                background: #fafafa;
                padding: 24px 33px 29px 30px;
                font-size: 14px;
                margin-top: 50px;
                margin-bottom: 30px;
                box-sizing: border-box;
                .phone-total {
                    font-size: 24px;
                    color: #ff6600;
                    margin-top: 18px;
                }
            }
        }
    }
    .price-info {
        background-color: #f3f3f3;
        height: 340px;
        h2 {
            font-size: 24px;
            color: #333333;
            padding-top: 38px;
            margin-bottom: 30px;
        }
    }
}
.btn-group {
    text-align: right;
}
.dTable {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
    text-align: center;
    border: 1px solid #e6e6e6;
    border-collapse: collapse;
    th,
    td {
        padding: 5px;
    }
    th {
        background-color: #ff6600;
        color: #fff;
    }
}
.dVideo {
    width: 100%;
    max-height: 400px;
}
</style>
